import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/ui/home/invest/gold_invest_viewmodel.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/http_image.dart';
import 'package:gold/widgets/xfg_text.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

/// @description: 黄金投资
/// @author tangzhentao
/// @created at 19:22 2024/11/30


class GoldInvestPage extends StatelessWidget {
  const GoldInvestPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<GoldInvestViewmodel>(
      appBar: (_) => xfgAppbar(title: '黄金投资'),
      model: GoldInvestViewmodel(),
      onInit: (data) => data.load(),
      builder: (ctx, invest) => Padding(
        padding: EdgeInsets.all(XfgSize().size10),
        child: Column(
          children: [
            /// 轮播图
            Visibility(
              visible: invest.banners.isNotEmpty,
              child: Container(
                margin: EdgeInsets.only(bottom: XfgSize().size10),
                width: XfgSize().size355,
                height: XfgSize().size116,
                child: CarouselSlider.builder(
                  options: CarouselOptions(height: double.infinity, aspectRatio: 3.1, viewportFraction: 1, autoPlay: true),
                  itemCount: invest.banners.length,
                  itemBuilder: (_, index, __) => HttpImage(invest.banners[index].image, size: Size.infinite, radius: BorderRadius.circular(XfgSize().size6)),
                ),
              ),
            ),
            Expanded(
              child: SmartRefresher(
                controller: invest.controller,
                enablePullDown: true,
                enablePullUp: true,
                onRefresh: () => invest.refresh(),
                onLoading: () => invest.loadMore(),
                child: ListView.builder(
                  itemCount: invest.goodsList.length,
                  itemBuilder: (_, index) {
                    final goods = invest.goodsList[index];
                    final reward = '${goods.rewardPoints?.replaceAll('.00', '')?? ''}积分';
                    final prices = goods.price?.split(('.'));
                    return GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: () => invest.toGoldInvestDetailPage(index),
                      child: Container(
                        margin: EdgeInsets.only(top: index == 0 ? 0:XfgSize().size10),
                        height: XfgSize().size140,
                        padding: EdgeInsets.all(XfgSize().size10),
                        decoration: BoxDecoration(color: XfgColor.white, borderRadius: BorderRadius.circular(XfgSize().size6)),
                        child: Row(
                          children: [
                            HttpImage(goods.coverImage, size: Size.square(XfgSize().size120), radius: BorderRadius.circular(XfgSize().size4)),
                            SizedBox(width: XfgSize().size8),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  XfgText(goods.name?? '', color: XfgColor.text2, fontSize: XfgSize().text16, maxLines: 2, overflow: TextOverflow.ellipsis, height: 1.5),
                                  SizedBox(height: XfgSize().size10),
                                  XfgText('¥', fontSize: XfgSize().text12, color: XfgColor.theme, children: [
                                    TextSpan(text: '${prices?.first?? ''}.', style: TextStyle(fontSize: XfgSize().text20, fontWeight: FontWeight.w500)),
                                    TextSpan(text: prices?.last?? '', style: TextStyle(fontSize: XfgSize().text12)),
                                    WidgetSpan(child: SizedBox(width: XfgSize().size8)),
                                    TextSpan(text: '￥${goods.marketPrice?? '0.00'}', style: TextStyle(fontSize: XfgSize().text12, color: XfgColor.colorA4, decoration: TextDecoration.lineThrough, decorationColor: XfgColor.colorA4)),
                                  ]),
                                  const Spacer(),
                                  Row(
                                    children: [
                                      Container(
                                        decoration: BoxDecoration(
                                            border: Border.all(color: XfgColor.itemIntegration, width: XfgSize().size0_5),
                                            borderRadius: BorderRadius.circular(XfgSize().size2)
                                        ),
                                        alignment: Alignment.center,
                                        height: XfgSize().size18,
                                        width: XfgSize().size12 + boundingTextSize(reward, style: TextStyle(fontSize: XfgSize().text12)).width,
                                        child: XfgText(reward, fontSize: XfgSize().text12, color: XfgColor.itemIntegration),
                                      ),
                                      const Spacer(),
                                      GestureDetector(
                                        onTap: () => invest.toGoodsOrderPage(index),
                                        child: Container(
                                          decoration: BoxDecoration(color: XfgColor.theme, borderRadius: BorderRadius.circular(XfgSize().size30)),
                                          alignment: Alignment.center,
                                          height: XfgSize().size30,
                                          width: XfgSize().size80,
                                          child: XfgText('立即下单', fontSize: XfgSize().text14, color: XfgColor.white),
                                        ),
                                      )
                                    ],
                                  )
                                ],
                              ),
                            ),
                            SizedBox(width: XfgSize().size10),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

}